<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/style.css" media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.all.js"></script>
    <script src="${pageContext.request.contextPath}/layui/echarts.js"></script>
</head>
<body>

<%--<div class="layadmin-header">
	<div class="layui-breadcrumb" lay-filter="breadcrumb">
		<a><cite>车位统计</cite></a>
	</div>
</div>--%>

<div class="layui-fluid mainBody">
    <div class="layui-col-md12 tabTitle layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">剩余车位统计</li>
            <li>分时段统计</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0;">
            <!-- 剩余 车位统计 -->
            <div class="layui-tab-item layui-show" style="position: relative;min-height: 200px;">
                <div class='fresh'>
                    <input type="checkbox" class="autoRefresh">
                    <span>&nbsp;自动刷新&nbsp;&nbsp;</span>
                    <button class="layui-btn layui-btn-normal layui-btn-xs"><i
                            class="layui-icon layui-icon-refresh"></i></button>
                </div>
                <div class="layui-col-md12 contents">
                    <div class="layui-col-md4 items">
                        <div class="areaA"></div>
                        <div class="areaDetail">
                            <div class="names"><span>A&nbsp;</span>区剩余车位</div>
                            <div style="overflow: hidden;padding-bottom: 36px;">
                                <div class="layui-col-md4">
                                    <div class="tips">1车道<strong>10</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md4">
                                    <div class="tips">2车道<strong>10</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md4">
                                    <div class="tips">3车道<strong>10</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md8 items">
                        <div class="areaB"></div>
                        <div class="areaDetail" style='margin:0 24px'>
                            <div class="names"><span>B&nbsp;</span>区剩余车位</div>
                            <div style="overflow: hidden;padding-bottom: 36px;">
                                <div class="layui-col-md2">
                                    <div class="tips">4车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md2">
                                    <div class="tips">5车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md2">
                                    <div class="tips">6车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md2">
                                    <div class="tips">7车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md2">
                                    <div class="tips">8车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                                <div class="layui-col-md2">
                                    <div class="tips">9车道<strong>0</strong>个</div>
                                    <img src="${pageContext.request.contextPath}/layui/images/park.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分时段统计 -->
            <div class="layui-tab-item">
                <div class="mainInfo">
                    <div class="titles">阳澄湖服务区车位变化</div>
                    <div class="layui-btn-group btns">
                        <button class="layui-btn layui-btn-primary active" role="week">周</button>
                        <button class="layui-btn layui-btn-primary" role="month">月</button>
                        <button class="layui-btn layui-btn-primary" role="year">年</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="box"></div>
    </div>
</div>

</body>
</html>

<script>
    var $ = layui.$,
        element = layui.element,
        table = layui.table,
        numA = 0, numB = 0, dataArrA = [], dataArrB = [], xArr = [], yArr = [], timer;


    var option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{b} <br/>{a}\n{c}%'
            },
            color: ["#14cec3"],
            grid: {
                right: 0
            },
            legend: {
                data: ['车位使用率']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: xArr
            }],
            yAxis: [{
                type: 'value',
                axisLabel : {
                    formatter: '{value} %'
                }
            }],
            series: [{
                name: '车位使用率',
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: yArr
            }]
        },
        optionA = {
            title: {
                text: "              个",
                subtext: 'A区剩余车位总数',
                left: "100px",
                top: "116px",
                textStyle: {
                    color: "#18cdc7",

                },
                subtextStyle: {
                    color: "#333",
                    textAlign: "center"
                }

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ["#14cec3", "#d1dee6"],
            series: [{
                name: '车位',
                type: 'pie',
                radius: ['68%', '80%'],
                startAngle: 45, //起始角度
                label: {
                    normal: {
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '36',
                            color: '#14cec3'
                        },
                        formatter: function () {
                            return numA;
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '36',
                            color: '#14cec3'
                        },
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: dataArrA
            }]
        },
        optionB = {
            title: {
                text: "               个",
                subtext: 'B区剩余车位总数',
                left: "100px",
                top: "116px",
                textStyle: {
                    color: "#18cdc7",

                },
                subtextStyle: {
                    color: "#333",
                    textAlign: "center"
                }

            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            color: ["#14cec3", "#d1dee6"],
            series: [{
                name: '车位',
                type: 'pie',
                radius: ['68%', '80%'],
                startAngle: 45, //起始角度
                label: {
                    normal: {
                        position: 'center',
                        show: true,
                        textStyle: {
                            fontSize: '36',
                            color: '#14cec3'
                        },
                        formatter: function () {
                            return numB;
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '36',
                            color: '#14cec3'
                        },
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: dataArrB
            }]
        };


    // 车道剩余个数 赋值
    setItem();
    //分时段赋值
    // getItem("week");
    //事件监听
    element.on('tab(demo)', function (data) {
        if (data.index == 1) {
            $(".box").show();
            getItem("week");
        } else {
            $(".box").hide();
            setItem();
        }
    });

    $('.mainBody').on("click", ".btns .layui-btn", function () {
        $(this).addClass("active").siblings().removeClass("active");
        getItem($(this).attr("role"));
    }).on("click", ".fresh .layui-btn", function () {
        // 刷新按钮
        setItem();
    }).on("click", ".fresh .autoRefresh", function () {
        //自动刷新
        if ($(this).prop("checked") == true) {
            timer = setInterval("setItem()", 5000)
        } else {
            clearInterval(timer);
        }
    });

    // 设置剩余车位
    function setItem() {
        var index = layer.load(0, {"offset": '100px'});
        numA = 0;
        numB = 0;
        $.ajax({
            type: "post",
            url: '${pageContext.request.contextPath}/lane/getLaneRemainSpace',
            async: false,
            success: function (res) {
                setR_G(res.data, 0);
                res.data.forEach(function (e, i) {
                    if (i < 3) {
                        numA += parseInt(e);
                    } else {
                        numB += parseInt(e);
                    }
                });
                dataArrA.length = 0;
                dataArrA.push({
                        'value': numA,
                        'name': '剩余车位'
                    },
                    {
                        'value': res.totalA - numA,
                        'name': '已使用车位'
                    }
                );
                dataArrB.length = 0;
                dataArrB.push({
                        'value': numB,
                        'name': '剩余车位'
                    },
                    {
                        'value': res.totalB - numB,
                        'name': '已使用车位'
                    }
                );
                layer.close(index);
                layer.msg("数据更新成功", {"icon": 1, "offset": '100px'});
            },
            error: function (err) {

            }
        });
        echarts.init($(".areaA")[0]).setOption(optionA);
        echarts.init($(".areaB")[0]).setOption(optionB);
    }

    // 分时统计
    function getItem(data) {
        $.ajax({
            type: "post",
            url: '${pageContext.request.contextPath}/lane/displayByHour',
            async: false,
            data: {"param": data},
            success: function (data) {
                if (data.code == 200 && data.msg == "查询成功") {
                    xArr.length = 0;
                    yArr.length = 0;
                    data.data.forEach(function (e, i) {
                        xArr.push(e.timePeriod - 1 + ':00~' + e.timePeriod + ":00");
                        yArr.push(e.rate);
                    })
                }
            }
        });
        console.log(option)
        echarts.init($(".box")[0]).setOption(option);
    }

    function setR_G(arr, filter) {
        var filter = parseInt(filter) || 0;
        arr.forEach(function (e, i) {
            if (e <= filter) {
                $(".tips").eq(i).parent().addClass("red");
            } else {
                $(".tips").eq(i).parent().removeClass("red");
            }
            $(".tips").eq(i).html(i + 1 + '车道&nbsp;<strong>' + e + '</strong>个')
        })
    }
</script>